import React from 'react'
import '../assets/styles'
import {Scrollbars} from 'react-custom-scrollbars';

/**
 * 名称：自定义滚动条
 * 创建人：Dada.
 * 创建时间：2021年07月22日13:32:15
 */
class CustomScrollbars extends React.Component {
    scrollbar = null;

    scrollRight = (pos) => {
        this.scrollbar.view.scroll({
            left: pos,
            behavior: 'smooth',
        })
    }

    scrollTop = (pos) => {
        this.scrollbar.view.scroll({
            top: pos,
            behavior: 'smooth',
        })
    }

    render() {
        const {className, style} = this.props
        const fixedClassName = typeof className === 'undefined' ? '' : className
        const fixedStyle = typeof style === 'undefined' ? {} : style
        return (
            <Scrollbars className={`${fixedClassName}`}
                        ref={ref => this.scrollbar = ref}
                        style={fixedStyle}
                        autoHide={true}
                        renderTrackHorizontal={props => <div {...props} className="track-horizontal"/>}
                        renderTrackVertical={props => <div {...props} className="track-vertical"/>}
                        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
                        renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
                        renderView={props => <div {...props} className="view"/>}>
                {this.props.children}
            </Scrollbars>
        );
    }
}

export default CustomScrollbars
